<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./css/init.css">
    <link rel="stylesheet" href="./css/nav.css">
    <script src="./js/main.js"></script>
</head>
<body>
    <div id="app">
            <!-- 导航栏 -->
        <div class="nav">
            <div class="nav-top wapper">
                <div class="nav-top-left">
                    <ul>
                        <li><a href="#"><span>&nbsp首页</span></a></li>
                        <li><a href="#"><span>&nbsp全部书单</span></a></li>
                        
                    </ul>
                </div>
                <div class="search">
                    <input type="text" placeholder="请输入书的编号">
                    <div class="search-in"><a href="#"><span></span></a></div>
                </div>
                <div class="nav-top-right">
                    <ul>
                        <li><a href="#"><span>&nbspB树实现</span></a></li>
                        <li><a href="#"><span>&nbsp我的订阅</span></a></li>
                        <li><a href="#"><span>&nbsp个人信息</span></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 左侧书架栏 -->
        <div class="bookshelf clearfix">
            <div class="hot-book">
                <p>热门书籍</p>
                <ul>
                    <li>斗罗大陆1 <button>借阅</button></li>
                    <li>斗破苍穹<button>借阅</button></li>
                    <li>骆驼祥子<button>借阅</button></li>
                    <li>边城<button>借阅</button></li>
                    <li>水浒传<button>借阅</button></li>
                    <li>西游记<button>借阅</button></li>
                    <li>甄嬛传<button>借阅</button></li>
                    <li>一千零一夜<button>借阅</button></li>
                    <li>五年高考三年模拟<button>借阅</button></li>
                </ul>
            </div>

            <div class="all-books">
                <div class="operations">
                    <div class="oper-left">
                        <a href="#" class="choose">全部书单</a>/
                        <a href="#">订阅书单</a>
                    </div>
                    <div class="oper-right">
                        <button class="add">新增书单</button>
                        <button class="delete-button">下架书单</button>
                    </div>
                </div>
                <div class="book-content">
                    <div class="content-nav">
                        <table>
                            <thead>
                                <tr>
                                    <td>编号</td>
                                    <td>书名</td>
                                    <td>数量</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{book_one.id}}</td>
                                    <td>{{book_one.name}}</td>
                                    <td>{{book_one.book_number}}</td>
                                    <td v-if="book_one.book_number>0"><button>借阅</button></td>
                                    <td v-else><button>预约</button></td>
                                </tr>
                                <tr>
                                    <td>{{book_two.id}}</td>
                                    <td>{{book_two.name}}</td>
                                    <td>{{book_two.book_number}}</td>
                                    <td v-if="book_two.book_number>0"><button>借阅</button></td>
                                    <td v-else><button>预约</button></td>
                                </tr>
                                <tr>
                                    <td>{{book_two.id}}</td>
                                    <td>{{book_two.name}}</td>
                                    <td>{{book_two.book_number}}</td>
                                    <td v-if="book_two.book_number>0"><button>借阅</button></td>
                                    <td v-else><button>预约</button></td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 新增书单 -->
                        <div class="add-book">
                            <input type="text" placeholder="请输入书名">
                            <input type="text" placeholder="请输入书的数量">
                            <input type="text" placeholder="请输入书的编号"><br>
                            <button>确认</button>
                            <button class="delete">取消</button>
                        </div>

                        <div class="delete-book">
                            <input type="text" placeholder="请下架书的编号"><br>
                            <button>确认</button>
                            <button class="dele">取消</button>
                        </div>
                    </div>

                    <!-- 选页按钮 -->
                    <div class="paging">
                        <ul>
                            <li class="choosen"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                        </ul>
                    </div>

                </div>
            </div>

            <!-- 右侧我的订阅栏 -->
            <div class="bookshelf-right clearfix">
                <div class="my-borrow">
                    <P>我的订阅</P>
                    <ul>
                        <li>斗罗大陆1 <button>归还</button></li>
                        <li>斗破苍穹<button>借阅</button></li>
                        <li>骆驼祥子<button>借阅</button></li>
                        <li>边城<button>借阅</button></li>
                        <li>水浒传<button>借阅</button></li>
                        <li>西游记<button>借阅</button></li>
                        <li>甄嬛传<button>借阅</button></li>
                        <li>一千零一夜<button>借阅</button></li>
                        <li>五年高考三年模拟<button>借阅</button></li>
                    </ul>
                </div>
            </div>
        </div>
        <hr>
    </div>
    <script src="./vue/vue.js"></script> 
    <script>
        new Vue({
            el:'#app',
            data:{
                book_one:{
                    id:'1000',
                    name:'YIsd',
                    book_number:'300'
                },
                 book_two:{
                    id:'2000',
                    name:"一千零一夜",
                    book_number:'0'
                },
            }
        })
    </script>
   
</body>
</html>